<template>
  <div class="whole-box">
    <div class="firtbox">
      <h5 class="firt-img">
        <i class="fa fa-cubes"></i> 我的试卷
      </h5>
      <p class="firt-in">集中管理您的试卷！</p>
    </div>
    <div class="secbox">
      <div class="headbox">
        <div>
          <!--changepage -->
          <button @click="changepage" class="btn">新建试卷</button>
        </div>
        <div class="sec-img">
          <i class="fa fa-cube"></i>原创试题
        </div>
        <div class="firt-in">请选择一个您之前预置的试卷类型或直接创建一个</div>
        <br style="clear:both" />
      </div>
      <div class="bodybox">
        <el-table :data="paperList" stripe style="width: 100%" class="table">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="name" label="类型名称"></el-table-column>
          <el-table-column prop="preBase.student.student" label="适用对象"></el-table-column>
          <el-table-column prop="preBase.scores" label="分值"></el-table-column>
          <el-table-column label="试卷详情">
            <template slot-scope="scope">
              <el-button  type="success"  plain @click="detailsPaper(scope.row.id)">查看</el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
          background
          :pager-count="5"
          layout="prev, pager, next"
          :total="total"
          class="page"
        ></el-pagination>
      </div>
      
    </div>
  </div>
</template>

<script>
import { getRequest } from "../utils/api"
import { postRequest } from "../utils/api"
import { postJsonRequest } from "../utils/api"
export default {
  name: "MyTestPaper",
  components: {},
  data() {
    return {
      idInfo:{id:2},//用户id
      total:0,//试卷数量
      paperList:[],//试卷列表
    };
  },
  created(){
    this.getPapar()
  },
  
  methods: {
    changepage() {
      this.$router.push("./original_paper");
    },
    ////调用接口查看我的试卷
    getPapar:function(){
      var _this=this;
      postRequest('/paper/get_tree',{id:2}).then(
      res =>{
        var result = res.data;
        //判断获取数据是否成功

        _this.paperList=result.data.list
        // 将后台数据绑定到paperList
        _this.total = result.data.total
        console.log(result)
      })
    },
    //根据试卷id 查看试卷详情内容----不理解接口返回数据
    detailsPaper:function(id){
      const {herf} = this.$router.resolve({
        name:"试卷编辑",
        path:"/creat_paper",
        query:{
          id:id
          // 试卷预置类型id
        }
      });
      window.open(herf,'blank');
      console.log(id);

    }
  }

};
</script>

<style scoped>
.whole-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.firtbox {
  padding: 5px 0px 15px 5px;
  position: relative;
  text-align: left;
  background-color: #ffffff;
  margin: 5px 5px 5px 0px;
  width: 100%;
  border-radius: 2px;
  box-sizing: border-box;
  box-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.firt-img {
  font-weight: 500;
  font-size: 13px;
  margin: 0;
  padding: 0;
}
.firt-in {
  font-size: 10px;
  color: #777777;
  height: 7px;
  margin: 0;
  padding: 0;
}
.secbox {
  padding-top: 4px;
  height: auto;
  background-color: #ffffff;
  margin: 15px auto auto 0%;
  width: 100%;
  text-align: left;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.headbox {
  margin: 0px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  height: auto;
  width: 100%;
  position: relative;
  text-align: left;
  background-color: #ffffff;
  border-bottom: 1px solid;
  border-bottom-color: #f0efef;
}
.bodybox {
  margin: 0 0 0 0;
  padding: 10px 5px 0px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
}
.btn {
  margin-top: 3px;
  margin-right: 20px;
  float: right;
  color: #a0d4f5;
  border: 1px solid #a0d4f5;
  background-color: white;
  padding: 9px 20px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  border-radius: 2px;
}
.btn:hover {
  color: #ffffff;
  background-color: #a0d4f5;
}
.table {
  padding: 0 10px 0 10px;
}
.page {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 30px;
  float: right;
}
</style>
